import React from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

class Message extends React.Component {
    state = {
        List: [
            {id: "01", title: '消息1'},
            {id: "02", title: '消息2'},
            {id: "03", title: '消息3'}
        ]
    }
    pushShow = (id,title) => {
        console.log(id,title)
        console.log("message",this.props)
        // this.props.history.push("/home/message/detail",{id,title})
        this.props.history.replace("/home/message/detail",{id,title})
    }
    render() {
        const {List} = this.state

        return (
            <div>
                <ul>
                    {
                        List.map(item => {
                            return (
                                <li key={item.id}>
                                    {/*<a href="/message1">{item.title}</a>*/}
                                    {/*传递 params 参数*/}
                                    {/*<Link to = {`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>*/}
                                    {/* 传递 search 参数   */}
                                    {/*<Link to = {`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link>*/}
                                    {/*state 传参*/}
                                    {/*<Link to = {{pathname:'/home/message/detail',state:{id:item.id,title:item.title}}}>{item.title}</Link>*/}
                                    <button onClick={() => this.pushShow(item.id,item.title)}>{item.title}</button>
                                </li>
                            )

                        })
                    }
                </ul>
                <br/>
                <div>
                   {/* params 传参*/}
                   {/*<Route path = "/home/message/detail/:id/:title" component={Detail} />*/}
                   {/*search  传参*/}
                   {/*<Route path = "/home/message/detail" component={Detail} />*/}
                   {/*state 传参*/}
                   <Route path = "/home/message/detail" component={Detail} />
                </div>
            </div>
        )

    }
}

export default Message